﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- saved from url=(0049)http://colorschemedesigner.com/sample/index2.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	
	<title>Home</title>
	<link rel="stylesheet" href="style/style2.css" type="text/css" media="screen">
<script type="text/javascript">

</script>


</head><body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type="text/javascript" src="/Scripts/ckeditor/ckeditor.js"></script>

<script type="text/javascript" src="/Scripts/jquery.form.js"></script>

<style>
    .highlight
    {
        border-style: outset !important;
        border-width: medium !important;
        background-color: Aqua !important;
    }
    .edit_form_field
    {
        float: none;
    }
</style>

<script type="text/javascript">
    var prev_selected_elem = null,
    _contents_hash = [];

    function load_ck_editor_data() {
        var editor_data = CKEDITOR.instances.Html_field.getData();
        $("#Html_field").val(editor_data);
    }
    function load_data_into_ck_editor() {
        CKEDITOR.instances.Html_field.setData($("#Html_field").val());
    }

    function unique_pairs(base_array) {
        var r = new Array();
        o: for (var i = 0, n = base_array.length; i < n; i++) {
            for (var x = 0, y = r.length; x < y; x++) {
                if (r[x].ID == base_array[i].ID) {
                    continue o;
                }
            }
            r[r.length] = base_array[i];
        }
        return r;
    }

    function fill_form_with_content(content_key) {
        var content_obj = _contents_hash[content_key];
        if (content_obj == null) {
            $("#ID_field").val("");
            $("#ID_field").attr("disabled", true);
            $("#Title_field").val("");
            $("#Html_field").val("");
            var pair = _criteria_and_element[content_key];
            $("#AttributeToMatch_field").val(pair[0]);
            $("#ElementMatchCriteria_field").val(pair[1]);
            load_data_into_ck_editor();

            $("#save_new_btn").show();
            $("#save_new_btn").attr("disabled", false);
            $("#save_btn").hide();
            $("#save_btn").attr("disabled", true);
            $("#del_btn").hide();
            $("#del_btn").attr("disabled", true);
        }
        else {
            $("#ID_field").val(content_obj.ID);
            $("#Title_field").val(content_obj.Title);
            $("#Html_field").val(content_obj.Html);
            $("#AttributeToMatch_field").val(content_obj.AttributeToMatch);
            $("#ElementMatchCriteria_field").val(content_obj.ElementMatchCriteria);
            load_data_into_ck_editor();
            //Sets up the form to allow only edits
            $("#ID_field").attr("disabled", true);

            $("#save_new_btn").hide();
            $("#save_new_btn").attr("disabled", true);
            $("#save_btn").show();
            $("#save_btn").attr("disabled", false);
            $("#del_btn").show();
            $("#del_btn").attr("disabled", false);
        }
    }

    function create_html_for_cmb(field_id, field_name, id_label_pairs) {

        //Sort the pairs
        id_label_pairs = id_label_pairs.sort(function(a, b) {
            if (a.Label == b.Label)
                return 0;
            else if (a.Label < b.Label)
                return -1;
            else if (a.Label > b.Label)
                return 1;
        }
             );

        html_txt = "<select id=\"" + field_id +
            "\" name=\"" + field_name +
            "\" >";
        html_txt += '<option value=""></option>';
        $.each(id_label_pairs, function(index, id_label_pair) {
            html_txt += '<option value="' + id_label_pair.ID + '">' + id_label_pair.Label + '</option>';
        });
        html_txt += '</select>';
        return html_txt
    }

    function create_html_for_menu(id_label_pairs) {

        //Sort the pairs
        id_label_pairs = id_label_pairs.sort(function (a, b) {
            if (a.Label == b.Label)
                return 0;
            else if (a.Label < b.Label)
                return -1;
            else if (a.Label > b.Label)
                return 1;
        }
             );

        html_txt = "<ul>";
//        $.each(id_label_pairs, function (index, id_label_pair) {
//            html_txt += "<li><a href=\"#\" onclick=\"fill_form_with_content(" + id_label_pair.ID +
//            ");\" >" + id_label_pair.Label +
//            "</a></li>";
//        });
//        $.each(id_label_pairs, function (index, id_label_pair) {
//            html_txt += "<li><a href=\"#\" onclick=\"ChangeElementSelection(\"" + id_label_pair.ID.replace('"',"\\\"") +
//            "\");\" >" + id_label_pair.Label +
//            "</a></li>";
//        });
        html_txt += '</ul>';
        return html_txt
    }

    function ChangeElementSelection(new_value) {
        $("#ids_field").val(new_value);
    }

    function IDPair() {
        this.ID = 0;
        this.Label = "";
    }

    _criteria_and_element = [];
    $(document).ready(function() {
        var pairs = []
        $("[id]").each(function(i) {
            var pair = new IDPair();
            var id = $(this).attr("id")
            pair.ID = "id='" + id + "'";
            pair.Label = "id=" + id;
            pairs.push(pair);
            _criteria_and_element[pair.ID] = pair.Label.split('=');
        });
        $("[class]").each(function(i) {
            var pair = new IDPair();
            pair.ID = "class='" + $(this).attr("class") + "'";
            pair.Label = "class=" + $(this).attr("class");
            pairs.push(pair);
            _criteria_and_element[pair.ID] = pair.Label.split('=');
        });

        //preview = window.document.body;
        //pairs = [];
        //inspect_element(pairs, preview.childNodes);
        pairs = unique_pairs(pairs);
        $("#ids").html(create_html_for_cmb("ids_field", "ids_field", pairs));
        $("#GENECMS-IDS").html(create_html_for_menu(pairs));
        // prepare
        $("#PageID_field").val(_page_id);

        //callback to highlight selected elements
        $("#ids_field").change(function() {
            //Highlight element(s) chosen in the combo box when selected
            var content_key = $("#ids_field").val();
            var criteria = '[' + content_key + ']';
            if (prev_selected_elem != null) {
                prev_selected_elem.removeClass("highlight");
            }
            prev_selected_elem = $(criteria);
            prev_selected_elem.addClass("highlight");
            fill_form_with_content(content_key);
        });

        //callback to handle save new record
        $("#save_new_btn").click(function(e) {
            // stop normal link click
            e.preventDefault();
            load_ck_editor_data();
            save_changes("/contents/create");
        });
        //callback to handle save existing record
        $("#save_btn").click(function(e) {
            // stop normal link click
            e.preventDefault();
            load_ck_editor_data();
            save_changes("/contents/edit/" + $("#ID_field").val());
        });
        //callback to handle delete existing record
        $("#del_btn").click(function(e) {
            // stop normal link click
            e.preventDefault();
            var result = confirm("Are you sure you want to delete this content?")
            if (result == true) {
                $.post("/contents/delete", "ids_to_delete=" + $("#ID_field").val(),
                        function(data) {
                            window.location.replace("/website/EditPage/" + $("#PageID_field").val());

                        }
                      );
            }
        });
        CKEDITOR.replace('Html', {
        //filebrowserBrowseUrl : '/website/assets-brws?Type=Link&Levels=3',
        filebrowserImageBrowseUrl : '/website/assetsbrowse?Type=Link&Levels=1',
        filebrowserFlashBrowseUrl : '/website/assetsbrowse?Type=Link&Levels=1'
		});
    });

    function inspect_element(pairs, child_nodes) {
        for (var child_idx in child_nodes) {
            if (child_nodes[child_idx].id != null &&
child_nodes[child_idx].id != "") {
                var pair = new IDPair();
                pair.ID = "id=" + child_nodes[child_idx].id;
                pair.Label = "id=" + child_nodes[child_idx].id;
                pairs.push(pair);
            }
            if (child_nodes[child_idx].className != null &&
child_nodes[child_idx].className != "") {
                var pair = new IDPair();
                pair.ID = "className=" + child_nodes[child_idx].className;
                pair.Label = "className=" + child_nodes[child_idx].className;
                pairs.push(pair);
            }
            if (child_nodes[child_idx].childNodes != null &&
				   child_nodes[child_idx].childNodes.length > 0) {
                inspect_element(pairs, child_nodes[child_idx].childNodes);
            }
        }
    }

    ///Form handling

    //Sends via Ajax POST the contents of the details_form
    function save_changes(post_url) {
        //page = _all_pages[_curr_selected_record_id];
        var queryString = $('#details_form').formSerialize();
        $.post(post_url, queryString,
                    function(data) {
                        handle_response_from_crud(data, _page_id);
                    }
                  );
        return false;
    }

    function handle_response_from_crud(response_json, page_id) {

        $(".input-validation-error").removeClass("input-validation-error");
        $("#error_messages").empty();
        if (response_json.toString().substring(0, 30).toUpperCase().indexOf("<HTML") >= 0) {
            //the response is a html to display
            $("#error_messages").html(response_json);
        }
        else {
            if (response_json.type == "Error") {
                //Display the error message in each field
                violations = response_json.violations;
                err_html = "<p>The following errors ocurred:</p><ul>";
                for (var violation_idx = 0; violation_idx < violations.length;
    violation_idx++) {
                    err_html += "<li>" +
        violations[violation_idx].ErrorMessage + "</li>";
                    $("#" + violations[violation_idx].PropertyName
        + "_field").addClass("input-validation-error");
                }
                $("#error_messages").html(err_html + "</ul>");
            }
            else {
                window.location.replace("/website/EditPage/" + page_id);
            }
        }
    };


    
</script>
<div style="height: 600px">
<div style="float: left; width: 100px; height:600px; overflow: scroll;" id="GENECMS-IDS">
</div>
<div style="float: left; width: 800px; height:600px;
overflow:scroll;" id="GENECMS-PAGE-PREVIEW">


<div id="topbg"></div>

<div id="main">


	<div id="header">
		<div id="hdr-overlay"></div>
		<div id="hdr-box1" class="box bg-pri-1"></div>
		<div id="hdr-box2" class="box bg-pri-2"></div>
		<div id="hdr-box3" class="box bg-pri-3"></div>
		<div id="hdr-box4" class="box bg-pri-4"></div>
		<h1>B & H Transporting</h1>
	</div>

    <span id="menu"><ul>
<li><a class="sel" href="Home.htm
"><span></span>Home
</a>
</li>
<li><a href="ContactUs.htm
"><span></span>Contact Us
</a>
</li>
</ul>
</span>

	<div id="content">
		<span id="content_square"><div id="left">
	<h3 class="ttl">
		Welcome</h3>
	<p>
		Welcome to <strong>B &amp; H Transporting</strong>!</p>
	<p>
		We are a family owned business with more than 20 years of experience pulling homes in the state of Florida. Our trucks are state of the art and we use them to move homes to all corners of the sunshine state.</p>
	<p>
		You may contact us at <strong>863-287-1130</strong>.</p>
</div>
<div id="right">
	<p>
		<img alt="Truck pulling House" src="imgs/front-side.jpg"></p>
</div>
<div style="width: 650px; margin-left: auto; margin-right: auto;">
	<img alt="Truck pulling House" src="imgs/front1.jpg"></div></span>
		<div class="cleaner"></div>

		<div id="footer">
			<a href="Home.htm">Home</a> |
			<a href="ContactUs.htm">Contact Us</a> 
		</div>


	</div>

</div>


 <!-- this is populated from server by getting innerhtml of Body elem and then using text replace
also, the inner html is replaced with the changed CodeTo Inject -->
</div>

<div style="width: 900px; height:600px;
overflow:scroll;" id="GENECMS-CONTENT-FORM">

<div id="ids">
</div>
<form method="post" action="#" id="details_form">
<div id="error_messages" class="validation-summary-errors">
</div>
<div id="details_form_fields">
    <fieldset>
        <legend>Fields</legend>
        <div class="edit_form_field">
            <label>
                ID</label>
            <input width="21px" name="ID" id="ID_field"></div>
        <div class="edit_form_field">
            <label>
                Title</label><input width="90px" name="Title" id="Title_field">
        </div>
        <div class="edit_form_field">
            <label>
                Html</label>
            <div style="clear: left;">
            </div>
            <textarea cols="50" rows="20" name="Html" id="Html_field"></textarea></div>
        <input type="hidden" name="PageID" id="PageID_field">
        <input type="hidden" name="ElementMatchCriteria" id="ElementMatchCriteria_field">
        <input type="hidden" name="AttributeToMatch" id="AttributeToMatch_field">
        <input type="reset" value="Clear the Form">
        |
        <button name="CreateForm" id="save_btn">
            Save Changes</button>
        <button name="SaveForm" id="save_new_btn">
            Save Changes</button>
        |
        <button name="DeleteForm" id="del_btn">
            Delete</button>
</form>
</fieldset></div>
</div><script type="text/javascript">
_contents_hash["id='left'"] = {"ID":"4",  "PageID":"1",  "ElementMatchCriteria":"left", "AttributeToMatch":"id                                      ", "Html":"<div class=\"highlight\" id=\"left\">\n	<h3 class=\"ttl\">\n		<span id=\"content_square\">Welcome</span></h3>\n	<p>\n		<span id=\"content_square\">Welcome to <strong>B &amp; H Transporting</strong>!</span></p>\n	<p>\n		<span id=\"content_square\">We are a family owned business with more than 20 years of experience pulling homes. Our trucks are state of the art.</span></p>\n</div>", "Title":"Main Content" }
_contents_hash["id='right'"] = {"ID":"5",  "PageID":"1",  "ElementMatchCriteria":"right", "AttributeToMatch":"id                                      ", "Html":"<p>\n	<img alt=\"Truck pulling House\" src=\"imgs/front-side.jpg\" /></p>\n", "Title":"Front page img" }
_contents_hash["id='content_square'"] = {"ID":"8",  "PageID":"1",  "ElementMatchCriteria":"content_square", "AttributeToMatch":"id                                      ", "Html":"<div id=\"left\">\n	<h3 class=\"ttl\">\n		Welcome</h3>\n	<p>\n		Welcome to <strong>B &amp; H Transporting</strong>!</p>\n	<p>\n		We are a family owned business with more than 20 years of experience pulling homes in the state of Florida. Our trucks are state of the art and we use them to move homes to all corners of the sunshine state.</p>\n	<p>\n		You may contact us at <strong>863-287-1130</strong>.</p>\n</div>\n<div id=\"right\">\n	<p>\n		<img alt=\"Truck pulling House\" src=\"imgs/front-side.jpg\" /></p>\n</div>\n<div style=\"width: 650px; margin-left: auto; margin-right: auto;\">\n	<img alt=\"Truck pulling House\" src=\"imgs/front1.jpg\" /></div>", "Title":"Main Content" }
_page_id=1</script></div></body></html>